تقدم جلب البيانات في الخلفية للواجهة الأمامية: تتبع تقدم التنزيل

في تطبيقات الويب الحديثة، يعد استرداد البيانات من الخوادم البعيدة مطلبًا أساسيًا. سواء كان الأمر يتعلق بتنزيل ملفات كبيرة، أو جلب استجابات واجهة برمجة التطبيقات (API)، أو ببساطة تحديث بيانات التطبيق، يتوقع المستخدمون تجربة سلسة وغنية بالمعلومات. ويتمثل أحد الجوانب الحاسمة في هذا الأمر في تقديم ملاحظات أثناء عمليات جلب البيانات في الخلفية، خاصة فيما يتعلق بتقدم التنزيل. تتعمق هذه المقالة في تقنيات تتبع تقدم التنزيل في الواجهة الأمامية، مما يعزز تجربة المستخدم ويقدم رؤى قيمة حول عمليات نقل البيانات.

لماذا يهم تتبع تقدم التنزيل

تخيل أنك تقوم بتنزيل صورة كبيرة، أو مستند، أو مجموعة بيانات كاملة. بدون أي مؤشر على التقدم، يُترك المستخدم في حيرة من أمره، غير متأكد مما إذا كان التطبيق يعمل، أو متجمدًا، أو يواجه مشكلة في الاتصال. يمكن أن يؤدي هذا النقص في الملاحظات إلى الإحباط، والتخلي عن التنزيلات، وتجربة مستخدم سلبية. يعالج تتبع تقدم التنزيل هذه المشكلة عن طريق:

• تحسين تجربة المستخدم: إن توفير إشارات مرئية، مثل أشرطة التقدم أو مؤشرات النسبة المئوية، يطمئن المستخدمين بأن شيئًا ما يحدث ويقدر وقت التنزيل المتبقي.
• تعزيز الشفافية: يساعد عرض تقدم التنزيل المستخدمين على فهم كمية البيانات التي تم نقلها والمتبقية.
• تسهيل معالجة الأخطاء: تتيح مراقبة التقدم للمطورين اكتشاف المشكلات المحتملة، مثل أخطاء الشبكة أو الاتصالات البطيئة، وتنفيذ آليات مناسبة لمعالجة الأخطاء. هذا يمنع التطبيق من الظهور بمظهر معطل ويتيح استراتيجيات أكثر قوة لاستعادة الأخطاء.
• تعزيز الأداء المتصور: حتى لو استغرق التنزيل نفسه وقتًا، فإن تحديثات التقدم تخلق تصورًا بالاستجابة والكفاءة، مما يجعل التطبيق يبدو أكثر احترافية.

واجهة برمجة تطبيقات الجلب (Fetch API) وأحداث التقدم

تعد واجهة برمجة تطبيقات الجلب (Fetch API) الطريقة الحديثة والمفضلة لإجراء طلبات الشبكة في متصفحات الويب. وهي توفر طريقة قوية ومرنة للتعامل مع استرداد البيانات. لسوء الحظ، لا توفر واجهة Fetch API القياسية، في حد ذاتها، وصولاً مباشرًا إلى أحداث تقدم التنزيل. ومع ذلك، يمكننا الاستفادة من تقنيات لتحقيق ذلك. على وجه التحديد، باستخدام XMLHttpRequest (XHR) أو الاستفادة من الاستجابات المتدفقة.

استخدام XMLHttpRequest لتتبع التقدم

على الرغم من أن Fetch هي الطريقة المفضلة، إلا أن XMLHttpRequest (XHR) يوفر تحكمًا أكثر دقة في دورة حياة الطلب، بما في ذلك الوصول إلى أحداث التقدم. إليك مثال أساسي لكيفية تتبع تقدم التنزيل باستخدام XHR:

            
function trackDownloadProgress(url, callback) {
  const xhr = new XMLHttpRequest();

  xhr.open('GET', url, true);

  xhr.onprogress = (event) => {
    if (event.lengthComputable) {
      const percentComplete = (event.loaded / event.total) * 100;
      callback(percentComplete);
    }
  };

  xhr.onload = () => {
    if (xhr.status === 200) {
      // Success
      callback(100);
      // Process the response
    } else {
      // Error
      callback(-1, xhr.status); // Indicate an error
    }
  };

  xhr.onerror = () => {
    callback(-1, 'Network Error'); // Indicate a network error
  };

  xhr.send();
}

// Example usage:
trackDownloadProgress('https://example.com/your-large-file.zip', (progress, error) => {
  if (error) {
    console.error('Download Error:', error);
    // Display an error message to the user
  } else {
    if (progress === -1) {
      console.error('Download Failed');
    } else {
      console.log('Download Progress:', progress.toFixed(2) + '%');
      // Update a progress bar element in your UI
    }
  }
});

            

              
                Copy
              
            
          

في هذا الكود:

• نقوم بإنشاء كائن XMLHttpRequest.
• نستخدم xhr.open() لتحديد الطريقة وعنوان URL وما إذا كان الطلب يجب أن يكون غير متزامن (true).
• xhr.onprogress هو معالج أحداث يتم تشغيله بشكل دوري مع تقدم التنزيل. يمثل event.loaded كمية البيانات التي تم تنزيلها حتى الآن، ويمثل event.total الحجم الإجمالي للمورد (إذا قدم الخادم ترويسة Content-Length).
• نحسب النسبة المئوية المكتملة باستخدام (event.loaded / event.total) * 100.
• يتم استدعاء xhr.onload عند اكتمال التنزيل (أو نجاح الطلب). نتحقق من xhr.status لتحديد النتيجة (على سبيل المثال، 200 للنجاح).
• يتعامل xhr.onerror مع أخطاء الشبكة أو الاتصال المحتملة.
• نقوم بتمرير النسبة المئوية للتقدم إلى الدالة callback لتحديث واجهة المستخدم. يتم الإشارة إلى خطأ بـ -1 للتقدم والسبب.

ملاحظة: قد يكون event.total صفرًا إذا لم يقدم الخادم ترويسة Content-Length. في مثل هذه الحالات، يكون تتبع التقدم محدودًا، وقد تتمكن فقط من عرض مؤشر تقدم غير محدد (مثل عجلة دوارة).

تتبع التقدم باستخدام Fetch والاستجابات المتدفقة

تسمح المتصفحات الحديثة بتدفق الاستجابة، مما يوفر حلاً مشابهًا لتقنية XHR. وهذا مفيد بشكل خاص عند التعامل مع الملفات الكبيرة. الفكرة الأساسية هي قراءة الاستجابة كتدفق واستخدام ReadableStream لمراقبة أجزاء البيانات عند وصولها.

            
async function trackDownloadProgressFetch(url, callback) {
  try {
    const response = await fetch(url);

    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    const totalBytes = response.headers.get('content-length');
    let loadedBytes = 0;

    if (!response.body) {
        throw new Error('ReadableStream not yet supported');
    }

    const reader = response.body.getReader();

    while (true) {
      const { done, value } = await reader.read();

      if (done) {
        callback(100); // Download complete
        break;
      }

      loadedBytes += value.byteLength;

      let progress = 0;
      if (totalBytes) {
        progress = (loadedBytes / totalBytes) * 100;
      }

      callback(progress);
    }

  } catch (error) {
    console.error('Download error:', error);
    callback(-1, error.message); // Indicate an error
  }
}

// Example usage:
trackDownloadProgressFetch('https://example.com/your-large-file.zip', (progress, error) => {
  if (error) {
    console.error('Download Error:', error);
    // Display an error message to the user
  } else {
    if (progress === -1) {
      console.error('Download Failed');
    } else {
      console.log('Download Progress:', progress.toFixed(2) + '%');
      // Update a progress bar element in your UI
    }
  }
});

            

              
                Copy
              
            
          

إليك كيفية عمل هذا الكود:

• نستخدم fetch() لبدء الطلب.
• نتحقق من response.ok (الحالة في نطاق 200-299).
• نحصل على ترويسة content-length من الاستجابة لتحديد حجم الملف.
• response.body هو ReadableStream يمثل جسم الاستجابة. نحصل على reader لهذا التدفق.
• نستدعي reader.read() بشكل متكرر لقراءة أجزاء من البيانات من التدفق.
• يشير done إلى ما إذا كان قد تم قراءة التدفق بالكامل. إذا كانت `done` صحيحة، فهذا يعني أن التنزيل قد اكتمل.
• value هو ArrayBuffer يحتوي على الجزء الحالي من البيانات.
• نقوم بتحديث loadedBytes وحساب التقدم.
• نستدعي دالة رد الاتصال لتحديث واجهة المستخدم.

توفر هذه الطريقة نهجًا أكثر حداثة يوفر أداءً أفضل عند التعامل مع الملفات الكبيرة، حيث أنك لا تقوم بتحميل الملف بأكمله في الذاكرة مرة واحدة.

تنفيذ واجهة مستخدم لتقدم التنزيل

بمجرد حصولك على بيانات التقدم، فإن الخطوة التالية هي إنشاء واجهة مستخدم (UI) تنقل حالة التنزيل بشكل فعال. إليك بعض عناصر واجهة المستخدم وأفضل الممارسات:

أشرطة التقدم

أشرطة التقدم هي الطريقة الأكثر شيوعًا وبديهية لعرض تقدم التنزيل. فهي تمثل بصريًا النسبة المئوية للبيانات التي تم تنزيلها. يجب أن يقوم شريط التقدم بما يلي:

• الإشارة بوضوح إلى النسبة المئوية للتقدم، إما عدديًا أو بصريًا.
• استخدام الألوان والأنماط التي تتناسب مع تصميم تطبيقك.
• التفكير في إضافة وقت تقديري متبقٍ بناءً على معدل التنزيل، إذا كان متاحًا.

            
<div class="progress-container">
  <div class="progress-bar" style="width: 0%;"></div>
  <span class="progress-text">0%</span>
</div>

            

              
                Copy
              
            
          

            
.progress-container {
  width: 100%;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
  position: relative;
}

.progress-bar {
  height: 20px;
  background-color: #4CAF50;
  width: 0%;
}

.progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-weight: bold;
}

            

              
                Copy
              
            
          

            
function updateProgressBar(progress) {
  const progressBar = document.querySelector('.progress-bar');
  const progressText = document.querySelector('.progress-text');

  if (progress === -1) {
    progressBar.style.width = '100%';
    progressBar.style.backgroundColor = 'red';
    progressText.textContent = 'Error';
    return;
  }

  progressBar.style.width = progress + '%';
  progressText.textContent = progress.toFixed(0) + '%';
}

// Call updateProgressBar(progress) within your download progress callback.

            

              
                Copy
              
            
          

المؤشرات الدوارة/المؤشرات غير المحددة

عندما لا يكون الحجم الإجمالي للملف معروفًا (على سبيل المثال، الخادم لا يوفر ترويسة `Content-Length`)، يمكنك استخدام مؤشر تقدم غير محدد، مثل مؤشر دوار أو رسم متحرك للتحميل. هذا يشير إلى أن التنزيل قيد التقدم، حتى لو لم تتمكن من توفير نسبة مئوية.

رسائل الحالة

يوفر عرض الرسائل النصية التي تشير إلى حالة التنزيل وضوحًا وسياقًا. يمكن أن تتضمن هذه الرسائل:

• 'بدء التنزيل...' (الحالة الأولية)
• 'جارٍ التنزيل...' (أثناء التنزيل)
• 'تم تنزيل 50%...' (أثناء التقدم)
• 'اكتمل التنزيل!' (عند الإكمال بنجاح)
• 'فشل التنزيل. يرجى المحاولة مرة أخرى.' (عند حدوث خطأ)

معالجة الأخطاء

تعد معالجة الأخطاء القوية أمرًا حيويًا. تعامل مع الأخطاء المحتملة بأناقة عن طريق:

• عرض رسائل خطأ مفيدة للمستخدم.
• السماح للمستخدم بإعادة محاولة التنزيل.
• تسجيل الأخطاء لتصحيحها.

أفضل الممارسات لتتبع تقدم التنزيل في الواجهة الأمامية

• مراعاة ظروف شبكة المستخدم: يمكن أن تؤدي اتصالات الشبكة البطيئة أو غير الموثوقة إلى أوقات تنزيل طويلة. قدم ملاحظات تأخذ هذه الظروف في الاعتبار. قد تحسب الوقت التقديري المتبقي (على الرغم من أن هذا قد يكون غير دقيق مع سرعات الشبكة المتغيرة) وتعرض رسالة مثل 'جارٍ التنزيل... قد يستغرق هذا بضع دقائق'.
• تنظيم التحديثات: تجنب تحديث واجهة المستخدم بشكل متكرر جدًا، حيث يمكن أن يؤثر ذلك على الأداء. قم بتحديث شريط التقدم على فترات (على سبيل المثال، كل 100-200 ميلي ثانية) أو فقط عندما يتغير التقدم بشكل كبير.
• توفير ملاحظات مرئية واضحة: استخدم شريط تقدم أو مؤشر دوار واضح وموجز. اجعل من السهل فهم حالة التنزيل. فكر في استخدام ألوان تتوافق مع علامة تطبيقك التجارية.
• التعامل مع أنواع الملفات المختلفة: تأكد من أن تتبع التقدم الخاص بك يتعامل مع أنواع مختلفة من الملفات (الصور، المستندات، مقاطع الفيديو، إلخ) بشكل صحيح. فكر في عرض رمز مناسب لنوع الملف.
• التدويل (i18n): قم بترجمة جميع عناصر واجهة المستخدم (رسائل التقدم، رسائل الخطأ، إلخ) إلى لغات متعددة لدعم جمهور عالمي. استخدم مكتبة أو خدمة ترجمة لإدارة ترجماتك. على سبيل المثال، قد تحتاج رسالة التقدم إلى الترجمة: "Downloading..." إلى لغات مختلفة من أجل التدويل الصحيح.
• إمكانية الوصول: تأكد من أن مؤشرات التقدم الخاصة بك متاحة للمستخدمين ذوي الإعاقة. استخدم سمات ARIA (مثل `aria-valuenow`، `aria-valuemin`، `aria-valuemax`) لتوفير معلومات دلالية لقارئات الشاشة.
• الاختبار: اختبر تنفيذ تتبع تقدم التنزيل الخاص بك بدقة في ظل ظروف شبكة مختلفة (بطيئة، سريعة، غير مستقرة) وعلى أجهزة مختلفة. اختبر مع مجموعة من أحجام الملفات للتأكد من أن النظام يعمل كما هو متوقع.
• التخزين المؤقت: نفذ استراتيجيات التخزين المؤقت لتحسين أداء الملفات التي يتم تنزيلها بشكل متكرر. يمكن أن يقلل التخزين المؤقت للمتصفح والتخزين المؤقت من جانب الخادم من الحاجة إلى إعادة تنزيل الملفات، مما يحسن من استجابة تطبيقك المتصورة.
• مراعاة حدود حجم الملف: كن على دراية بحجم الملفات التي تسمح بتنزيلها. بالنسبة للملفات الكبيرة، فكر في تقسيم التنزيل إلى أجزاء أصغر وأكثر قابلية للإدارة، خاصة على الأجهزة المحمولة. اعرض تحذيرات للمستخدم إذا كانوا على وشك تنزيل ملف كبير جدًا قد يستهلك خطة بياناتهم.
• الإبلاغ عن الأخطاء: نفذ آليات الإبلاغ عن الأخطاء لالتقاط وتسجيل أخطاء التنزيل لتصحيح الأخطاء والمراقبة. استخدم أدوات مثل Sentry أو Rollbar لجمع بيانات الأخطاء.

التقنيات والاعتبارات المتقدمة

Web Workers لعمليات الخلفية

لمنع حظر الخيط الرئيسي وضمان استجابة واجهة المستخدم، فكر في استخدام Web Workers لأداء عملية التنزيل في الخلفية. هذا يحافظ على سلاسة واجهة المستخدم ويمنع المتصفح من التجمد أثناء التنزيل. يمكن لـ Web Worker توصيل تحديثات التقدم إلى الخيط الرئيسي باستخدام postMessage().

            
// In your main script (e.g., main.js)
const worker = new Worker('download-worker.js');

worker.postMessage({ url: 'https://example.com/your-large-file.zip' });

worker.onmessage = (event) => {
  if (event.data.type === 'progress') {
    updateProgressBar(event.data.progress);
  } else if (event.data.type === 'error') {
    console.error('Download Error:', event.data.error);
    // Handle error
  } else if (event.data.type === 'complete') {
    console.log('Download Complete!');
    // Handle completion
  }
};

            

              
                Copy
              
            
          

            
// In your worker script (e.g., download-worker.js)
self.onmessage = async (event) => {
  const { url } = event.data;
  try {
    const response = await fetch(url);

    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }

    const totalBytes = response.headers.get('content-length');
    let loadedBytes = 0;

    if (!response.body) {
        throw new Error('ReadableStream not yet supported');
    }

    const reader = response.body.getReader();

    while (true) {
      const { done, value } = await reader.read();

      if (done) {
        self.postMessage({ type: 'complete' });
        break;
      }

      loadedBytes += value.byteLength;

      let progress = 0;
      if (totalBytes) {
        progress = (loadedBytes / totalBytes) * 100;
      }

      self.postMessage({ type: 'progress', progress: progress });
    }

  } catch (error) {
    self.postMessage({ type: 'error', error: error.message });
  }
};

            

              
                Copy
              
            
          

التنزيلات القابلة للاستئناف

بالنسبة للملفات الكبيرة، فكر في تنفيذ التنزيلات القابلة للاستئناف. يتيح ذلك للمستخدم إيقاف التنزيل مؤقتًا واستئنافه لاحقًا. نفذ ترويسة `Range` في طلب HTTP الخاص بك لتحديد نطاق البايتات المطلوب تنزيله. ثم يستجيب الخادم بالجزء المطلوب من الملف، ويمكن للمتصفح الاستئناف من حيث توقف. يوفر هذا مرونة ضد انقطاعات الشبكة.

الترميز المقسم (Chunked Encoding)

عند استخدام الترميز المقسم، لن تكون ترويسة `Content-Length` موجودة. سترغب على الأرجح في الإشارة إلى تقدم غير محدد للمستخدم أو استخدام طريقة مختلطة حيث يتم تقريب الحجم في البداية. هذا هو الحال عادة عند استخدام خدمة بث، حيث لا يكون الحجم معروفًا على الفور، مثل بث الفيديو المباشر.

مشاركة الموارد عبر الأصول (CORS)

عند تنزيل الموارد من أصل مختلف (نطاق أو بروتوكول أو منفذ)، تأكد من أن الخادم يدعم CORS. يجب على الخادم تضمين ترويسة `Access-Control-Allow-Origin` في استجابته للسماح بالطلبات عبر الأصول. وإلا، فقد يتم حظر طلبات التنزيل الخاصة بك بواسطة المتصفح.

توافق المتصفحات

تأكد من أن تنفيذك يعمل عبر مختلف المتصفحات والأجهزة. اختبر تتبع تقدم التنزيل الخاص بك على المتصفحات الشائعة مثل Chrome و Firefox و Safari و Edge، وعلى الأجهزة المحمولة (iOS و Android). فكر في استخدام polyfills أو اكتشاف الميزات لدعم المتصفحات القديمة التي قد لا تدعم جميع الميزات بالكامل.

أمثلة من العالم الحقيقي

دعنا نلقي نظرة على بعض الأمثلة الواقعية لكيفية استخدام تتبع تقدم التنزيل بفعالية:

• منصات مشاركة الملفات: تستخدم منصات مثل Google Drive و Dropbox و WeTransfer أشرطة التقدم لإظهار تقدم تحميل وتنزيل الملفات. غالبًا ما توفر الوقت المتبقي المقدر ومعالجة الأخطاء لتجربة مستخدم سلسة.
• مواقع تنزيل البرامج: تعرض العديد من مواقع تنزيل البرامج أشرطة التقدم أثناء عملية التنزيل. تساعد هذه الأشرطة المستخدمين على البقاء على اطلاع بتقدم التنزيل وتقدير الوقت الذي سيستغرقه لإكماله. تستخدم مواقع مثل موقع تنزيل Mozilla Firefox الرسمي أشرطة التقدم.
• منصات التعلم عبر الإنترنت: تستخدم منصات التعلم عبر الإنترنت التي توفر محتوى فيديو أو مستندات تتبع التقدم لعرض حالة تنزيل المواد التعليمية.
• خدمات البث: تعرض خدمات البث أحيانًا تقدمًا للجلب المسبق أو التخزين المؤقت للمحتوى. هذا يعزز أداء التشغيل.
• مواقع التجارة الإلكترونية: تستخدم مواقع التجارة الإلكترونية تتبع التقدم عند تنزيل صور المنتجات أو الأصول الأخرى.

الخلاصة

يعد تنفيذ تتبع تقدم التنزيل في الواجهة الأمامية أمرًا ضروريًا لإنشاء تجربة مستخدم إيجابية وغنية بالمعلومات. من خلال توفير ملاحظات مرئية، وإدارة الأخطاء، ومراعاة التدويل وإمكانية الوصول، يمكنك بناء تطبيقات ويب أكثر سهولة في الاستخدام وموثوقية. يتيح استخدام واجهة برمجة تطبيقات Fetch أو XMLHttpRequest، جنبًا إلى جنب مع عناصر واجهة المستخدم المناسبة وأفضل الممارسات، للمطورين تقديم ملاحظات حاسمة أثناء عمليات جلب البيانات في الخلفية، مما يضمن تجربة أكثر سلاسة وجاذبية للمستخدمين في جميع أنحاء العالم. تذكر أن تأخذ في الاعتبار ظروف الشبكة المختلفة وأنواع الملفات وتوافق المتصفحات عند تصميم التنفيذ الخاص بك.